<template>
  <view class="head">
    <u-navbar title="搜索" :placeholder="true" :autoBack="true"></u-navbar>
  </view>
  <view class="search">
    <u-search
      :show-action="true"
      actionText="搜索"
      :animation="true"
      @custom="search"
      @search="search"
    ></u-search>
  </view>
  <view class="history">
    <view class="left">历史记录</view>
    <view class="right" @click="del">
      <img
        src="http://uniqn.zmycode.top/%E5%88%A0%E9%99%A4%20(1).png"
        alt=""
        class="img"
      />
    </view>
  </view>
  <view class="historylist" v-if="historylist || 0">
    <text class="historyfor" v-for="(item, index) in historylist" :key="index">
      {{ item.title }}
    </text>
  </view>
  <view v-else class="historylistelse">
    <img src="http://uniqn.zmycode.top/%E6%9A%82%E6%97%A0%E5%86%85%E5%AE%B9.png" alt="" class="img">
  </view>
</template>

<script setup>
import { ref } from "vue";
import { historylist } from "./index-search.js";
const search = ref(() => {
  console.log(1);
});
const del = ref(() => {
  historylist.value = false;
});
</script>

<style lang="scss" scoped>
.search {
  background-color: #fff;
  padding: 20rpx;
}
.history {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  .left {
    font-size: 32rpx;
    color: #8a8a8a;
  }
  .right {
    .img {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.historylist {
  background-color: #fff;
  padding: 20rpx 20rpx 50rpx;
  // border: 1px solid red;
  text {
    padding: 18rpx;
    font-size: 28rpx;
    border-radius: 30rpx;
    background-color: #f0f0f0;
    margin: 20rpx  20rpx 20rpx 20rpx;

  }
}
.historylistelse{
  position: relative;
  .img{
    width: 100rpx;
    height: 100rpx;
    margin: 0 auto;
    position: absolute;
    top: 40rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
